<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Password Reset Form with AJAX</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        .container {
            width: 300px;
            margin: 50px auto;
            text-align: center;
        }
        input, button {
            width: 100%;
            padding: 10px;
            margin-bottom: 10px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h2>Password Reset</h2>
        <form id="resetForm">
<!--            <label for="username">Username:</label>-->
<!--            <input type="text" id="username" name="username" required><br>-->
            <label for="oldPassword">Old Password:</label>
            <input type="password" id="oldPassword" name="oldPassword" required><br>
            <label for="newPassword">New Password:</label>
            <input type="password" id="newPassword" name="newPassword" required><br>
            <label for="confirmPassword">Confirm Password:</label>
            <input type="password" id="confirmPassword" name="confirmPassword" required><br>
            <button type="submit">Reset Password</button>
        </form>
        <p id="message"></p>
    </div>

    <script>
        $(document).ready(function() {
            var username = sessionStorage.getItem('username');
            $('#resetForm').on('submit', function(event) {
                event.preventDefault(); // 阻止表单默认提交行为

                // 从表单中获取数据
                var userData = {
                    "username": username,
                    "oldPassword": $('#oldPassword').val(),
                    "newPassword": $('#newPassword').val(),
                    "confirmPassword": $('#confirmPassword').val()
                };

                // 清除之前的提示信息
                $('#message').empty();

                // 使用$.ajax发送POST请求
                $.ajax({
                    url: 'http://127.0.0.1:8888/password_reset',
                    type: 'POST',
                    contentType: 'application/json; charset=utf-8',
                    dataType: 'json',
                    data: JSON.stringify(userData),
                    success: function(response) {
                        var status = response.status;
                        var message = response.msg;
                        if(status === 1) {
                            $('#message').text(message); // 这里假设message是"密码重置成功"
                        } else if(status === 0) {
                            $('#message').text(message); // 显示后端返回的错误信息，如"新密码和确认密码不匹配"或"验证失败，请检查用户名和密码是否正确"
                        } else if(status === -1) {
                            $('#message').text(message); // 显示"缺少必要参数"
                        } else {
                            // 处理其他未知状态的情况
                            $('#message').text('An unexpected error occurred');
                        }
                    },
                    error: function(xhr, textStatus, errorThrown) {
                        var errorMsg = 'Failed to send password reset request';
                        if (xhr.status) {
                            errorMsg += '. Server responded with status: ' + xhr.status;
                            if (xhr.responseText) {
                                errorMsg += ' and message: ' + xhr.responseText;
                            }
                        } else if (errorThrown) {
                            errorMsg += ': ' + errorThrown;
                        }
                        $('#message').text(errorMsg);
                    }
                });

            });
        });
    </script>
</body>
</html>
